<template>
	<view class="main-content-area">
		<u-navbar title="佣金龙虎榜" title-color="#000000" :border-bottom="false"
			:background="{ background: 'https://shop.lanbaozixun.com/static/mobile/images/bg.png' }"></u-navbar>

		<view class="u-p-20 flex">
			<view class="flex-1"></view>
			<view class="type-select" @click="show = true">
				<text class="u-p-r-10 xs">{{nowShowTypeText}}</text>
				<u-icon name="arrow-down-fill" size="20" color="#666666"></u-icon>
			</view>
		</view>

		<view class="u-m-l-24 u-m-r-24 u-m-t-24 rank_area">
			<view class="u-p-t-35 rank_item">
				<u-icon name="https://shop.lanbaozixun.com/static/mobile/images/tow.png" size="52"></u-icon>
				<image :src="pageDatas[1].avatar" :tag="pageDatas[1].level_info.name" mode="widthFix"
					style="width: 102rpx;height: 102rpx;border-radius: 20rpx;"></image>
				
				<view class="u-p-t-20">
					<view class="white u-line-1">{{pageDatas[1].nickname||'虚位以待'}}</view>
					<view class="flex u-p-t-10" style="justify-content: center;">
						<image src="https://xcx.ypxqfw.com/wxapp/images/index/star.png" mode="widthFix"
							style="width: 24rpx;height: 24rpx;border-radius: 20rpx;"></image>
						<view class="white u-p-l-10 bold">{{pageDatas[1].sum_money||0}}</view>
					</view>
				</view>
			</view>
			<view class="rank_item">
				<u-icon name="https://shop.lanbaozixun.com/static/mobile/images/one.png" size="56"></u-icon>
				<image :src="pageDatas[0].avatar" :tag="pageDatas[1].level_info.name" mode="widthFix"
					style="width: 102rpx;height: 102rpx;border-radius: 20rpx;"></image>
				<view class="u-p-t-20">
					<view class="white u-line-1">{{pageDatas[0].nickname||'虚位以待'}}</view>
					<view class="flex u-p-t-30" style="justify-content: center;">
						<image src="https://xcx.ypxqfw.com/wxapp/images/index/star.png" mode="widthFix"
							style="width: 24rpx;height: 24rpx;border-radius: 20rpx;"></image>
						<view class="white u-p-l-10 bold">{{pageDatas[0].sum_money||0}}</view>
					</view>
				</view>
			</view>
			<view class="u-p-t-35 rank_item">
				<u-icon name="https://shop.lanbaozixun.com/static/mobile/images/three.png" size="52"></u-icon>
				<image :src="pageDatas[2].avatar" :tag="pageDatas[1].level_info.name" mode="widthFix"
					style="width: 102rpx;height: 102rpx;border-radius: 20rpx;"></image>
				<view class="u-p-t-20">
					<view class="white u-line-1">{{pageDatas[2].nickname||'虚位以待'}}</view>
					<view class="flex u-p-t-10" style="justify-content: center;">
						<image src="https://xcx.ypxqfw.com/wxapp/images/index/star.png" mode="widthFix"
							style="width: 24rpx;height: 24rpx;border-radius: 20rpx;"></image>
						<view class="white u-p-l-10 bold">{{pageDatas[2].sum_money||0}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="lists-area">
			<view class="item flex" v-for="(v,k) in pageDatas" v-if="k > 2">
				<view>{{k + 1}}</view>
				<view class="flex flex-1 u-p-l-20">
					<image :src="v.avatar" mode="widthFix" style="width: 96rpx;height: 96rpx;border-radius: 100rpx;"></image>
					<view class="u-line-1 u-p-l-20">{{v.nickname||'虚位以待'}}</view>
				</view>
				<view class="flex" style="justify-content: center;">
					<image src="https://xcx.ypxqfw.com/wxapp/images/index/star.png" mode="widthFix" style="width: 24rpx;height: 24rpx;border-radius: 20rpx;"></image>
					<view class="u-p-l-10 bold">{{v.sum_money||0}}</view>
				</view>
			</view>
			<u-empty v-if="pageDatas.length <= 3" text="暂无数据" mode="list"></u-empty>
		</view>
		<u-action-sheet :list="list" v-model="show" @click="actionSheetClick"></u-action-sheet>
	</view>
</template>

<script>
	import {
		rankingListDatas
	} from '@/api/app'
	export default {
		data() {
			return {
				list:[
					{
						text: '周排行',
						value:'week'
					}, {
						text: '月排行',
						value:'money'
					}, {
						text: '年排行',
						value:'year' 
					}
				],
				show:false,
				nowShowType:'week',
				nowShowTypeText:'周排行',
				loaderStatus: true,
				pageDatas: {},
				
			}
		},
		async onLoad() {
			this.queryDatasFun()
		},
		methods:{
			actionSheetClick(e){
				this.nowShowType = this.list[e].value
				this.nowShowTypeText = this.list[e].text
				this.pageDatas = []
				this.queryDatasFun()
			},
			async queryDatasFun(){
				this.loaderStatus = true
				
				var d = await rankingListDatas({
					type:this.nowShowType
				});
				this.pageDatas = d.data
				
				this.loaderStatus = false
			}
		}
	}
</script>


<style scoped lang="scss">
	page {
		.main-content-area {
			min-height: 100vh;
			background: url('https://shop.lanbaozixun.com/static/mobile/images/bg.png');
			background-size: 100% 100%;

			.type-select {
				color: white;
				padding: 5px 20rpx;
				border-radius: 100rpx;
				background: rgba(204, 0, 0, 0.7);
			}
			
			.rank_area {
				gap: 10px;
				display: grid;
				grid-template-columns: repeat(3,1fr);
				
				.rank_item{
					display: flex;
					background: red;
					text-align: center;
					align-items: center;
					flex-direction: column;
					height: 300px;
					
					&:first-child{
						background: url('https://shop.lanbaozixun.com/static/mobile/images/rank-l.png') no-repeat;
						background-size: 100% 158px;
						background-position: 0 70px;
					}
					&:nth-child(2){
						background: url('https://shop.lanbaozixun.com/static/mobile/images/rank-c.png') no-repeat;
						background-size: 100% 175px;
						background-position: 0 50px;
					}
					
					&:last-child{
						background: url('https://shop.lanbaozixun.com/static/mobile/images/rank-r.png') no-repeat;
						background-size: 100% 149px;
						background-position: 0 76px;
					}
				}
			}
			
			.lists-area{
				height: 500px;
				padding: 15px 20px;
				margin: -140px 24rpx 0;
				position: relative;
				border-radius: 24px 24px 0px 0px;
				background: rgba(255, 255, 255, 0.8);
				background-image: url('https://shop.lanbaozixun.com/static/mobile/images/bg-tow.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>